<template>
    <div>
        <panle title='订单列表' content="订单列表"></panle>

        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
            <el-form-item label="课程名称" prop="coursename">
                <el-input size="mini" placeholder="请输入课程名称" v-model="form.coursename"></el-input>
            </el-form-item>
            <el-form-item label="订单号" prop="order_num">
                <el-input size="mini" placeholder="请输入订单号" v-model="form.order_num"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="tel">
                <el-input size="mini" placeholder="请输入手机号" v-model="form.tel"></el-input>
            </el-form-item>
            <el-form-item label="订单来源" prop="from">
                <el-select size="mini" v-model="form.from" placeholder="请选择">
                    <el-option v-for="item in orderfrom" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单状态" prop="state">
                <el-select size="mini" v-model="form.state" placeholder="请选择">
                    <el-option v-for="item in orderstate" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="支付时间" prop="pay_time">
                <el-date-picker v-model="form.pay_time" type="daterange" align="right" size="mini" unlink-panels
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="创建时间" prop="create_time">
                <el-date-picker v-model="form.create_time" type="daterange" align="right" size="mini" unlink-panels
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="销售用户号" prop="user_name">
                <el-input size="mini" placeholder="请输入" v-model="form.user_name"></el-input>
            </el-form-item>
            <el-form-item label="到课状态" prop="signin_status" v-if="form.signin_status">
                <el-select size="mini" v-model="form.signin_status" placeholder="请选择" disabled>
                    <el-option v-for="item in signin_status_arr" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <!--<pers-button type="primary" size="mini" @click="search" perms="live:order:search" label="搜索"></pers-button>-->
                <!--<pers-button size="mini" @click="resetForm('form')" perms="live:order:reset" label="重置"></pers-button>-->
                <!--<pers-button size="mini" @click="init()" perms="live:order:flushed" label="刷新"></pers-button>-->
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
                <el-button @click="resetForm('form')" size="mini">重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
                <vue-json-excel style="display: inline;margin-left: 10px;" :data="tableData" :fields="excelFields"
                    name="导出订单.xlsx" type="xlsx">
                    <el-button size="mini">导出</el-button>
                </vue-json-excel>
            </el-form-item>
        </el-form>
        <div class="table-wrap">
            <el-table :data="tableData" :loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                stripe default-expand-all height="800">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" width="55"></el-table-column>
                <el-table-column prop="statename" label="订单状态">
                    <template slot-scope="scope">
                        {{ scope.row.statename }}
                        <el-tag v-if="scope.row.state === 3 && scope.row.part_type !== '0'" size="mini" effect="dark"
                            type="danger"> - {{ part_paty[scope.row.part_type] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="order_num" label="订单号"></el-table-column>
                <el-table-column prop="coursename" label="课程名称"></el-table-column>
                <el-table-column prop="fee2" label="金额"></el-table-column>
                <el-table-column prop="tel" label="下单手机号"></el-table-column>
                <el-table-column prop="wx_avatarurl" label="微信头像">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.wx_avatarurl" fit="fill" style="width: 60px;height: 60px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="微信昵称"></el-table-column>
                <el-table-column prop="jieliangzhujiao" label="接量助教"></el-table-column>
                <el-table-column prop="nick_name" label="私域助教"></el-table-column>
                <el-table-column prop="from" label="订单来源"></el-table-column>
                <el-table-column prop="pay_time" label="支付时间"></el-table-column>
                <el-table-column prop="create_time" label="创建时间"></el-table-column>
                <el-table-column prop="pay_method" label="支付方式"></el-table-column>
                <el-table-column prop="sync_kanke_code" :formatter="format_sync_kanke_code" label="同步状态">

                </el-table-column>
                <el-table-column prop="state" label="操作" v-if="isShow(['live:order:refund'])">
                    <template slot-scope="scope">
                        <PersButton type="text" size="mini" label="退款" icon="fa  fa-undo" perms="live:order:refund"
                            @click="tuikuan(scope.row)"
                            v-if="scope.row.state == 1 || (scope.row.state == 3 && scope.row.part_type == 2)">
                        </PersButton>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="form.pageSize"
                    background layout="total, sizes, prev, pager, next, jumper" :total="form.total"></el-pagination>
            </div>
        </div>

        <!--弹出层  填写退款原因-->
        <el-dialog v-dialogDrag :visible.sync="open" width="600px" append-to-body title="申请退款">
            <el-form ref="form2" :model="form2" :rules="from2Rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="金额" prop="amount">
                            <el-input type="number" requ v-model="form2.amount" min="0" placeholder="请输入金额"
                                size="small" />
                        </el-form-item>
                        <el-form-item label="退款原因" prop="reason">
                            <el-input type="textarea" v-model="form2.reason" placeholder="请输入内容" size="small" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false" size="small">取 消</el-button>
                <!--<el-button type="primary" @click="submitForm('form2')" size="small">确 定</el-button>-->
                <pers-button type="primary" size="small" @click="submitForm('form2')" perms="live:order:refund_on"
                    label="确 定"></pers-button>
            </div>
        </el-dialog>
    </div>


</template>

<script>

import Panle from '@/components/Panle';
import { getOrderData, tuikuan } from '@/api/live/order';
import PersButton from '@/components/PersButton';
import debounce from '@/common/debounce.js';
import { hasPermission, isShow } from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';

export default {
    name: 'Live-Order',
    components: {
        Panle,
        PersButton,
        VueJsonExcel
    },
    data() {
        return {
            signin_status_arr: [{
                value: 0,
                label: '未到课'
            }, {
                value: 2,
                label: '已到课'
            }],
            open: false,
            part_paty: {
                "0": ' - ',
                "1": '全部退款',
                '2': '部分退款',
                '3': '全额退款'
            },
            orderfrom: [{
                value: '0',
                label: '直播间下单'
            }, {
                value: '1',
                label: '课程购买链接下单'
            }],
            orderstate: [{
                value: '0',
                label: '未支付'
            }, {
                value: '1',
                label: '已支付'
            }, {
                value: '2',
                label: '退款审核中'
            }, {
                value: '3',
                label: '已退款'
            }, {
                value: '4',
                label: '退款失败'
            }, {
                value: '5',
                label: '已失效'
            }],
            tableData: [],
            form: {
                order_num: '',
                coursename: '',
                from: '',
                tel: '',
                state: '',
                create_time: [],
                create_time1: '',
                create_time2: '',
                pay_time: [],
                pay_time1: '',
                pay_time2: '',
                pageSize: 10,
                pageNumber: 1,
                total: 0,
                liveId: [],
                user_name: '',
                signin_status: ''
            },
            form2: {
                "id": '',
                "reason": ''
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            from2Rules: {
                amount: [
                    { required: true, message: '请输入金额', trigger: 'change' },
                ],
                reason: [
                    { required: true, message: '请输入退款原因', trigger: 'change' },
                ],
            },
            excelFields: {
                "订单号": "order_num",
                "订单状态": "statename",
                "课程名称": "coursename",
                "金额": "fee2",
                "下单手机号": "tel",
                "微信昵称": "nickname",
                "接量助教": "jieliangzhujiao",
                "私域助教": "nick_name",
                "订单来源": "from",
                "支付时间": "pay_time",
                "创建时间": "create_time",
                "支付方式": "pay_method"
            }

        }
    },
    created() {

        const statInfoStr = sessionStorage.getItem('live-stat')
        const statInfo = JSON.parse(statInfoStr);
        if (statInfo) {
            const { liveId = [], state = '', user_name = '', signin_status = '' } = statInfo;
            this.form.liveId = [...liveId]
            this.form.state = state
            this.form.user_name = user_name
            this.form.signin_status = signin_status
        }
        sessionStorage.removeItem('live-stat')

        this.init(true);
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
            // console.log('init', this.form);
            getOrderData(this.form).then((res) => {
                console.log(res);
                this.tableData = res.data.list;
                this.form.total = res.data.total;
                this.loading = false;
            })
        },
        search: function () {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.form.pageNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.form.liveId = []
            this.form.state = ''
            this.form.user_name = ''
            this.form.signin_status = ''
            this.init();
        },
        tuikuan: function (e) {

            this.form2 = {
                "id": e.id,
                "reason": e.reason
            },
                this.open = true;

        },
        submitForm(e) {
            debounce(() => {
                // console.log(e);
                this.$refs[e].validate((valid) => {
                    if (!valid) return false;
                    tuikuan(this.form2).then((res) => {
                        // console.log(res)
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open = false;
                        } else {
                            this.msgError(res.msg);
                        }
                    })

                })

            }, 1000)

        },
        format_sync_kanke_code(row) {
            if (row.sync_kanke_code == null) {
                return '未同步'
            } else if (row.sync_kanke_code == "200") {
                return '已同步'
            } else {
                return '失败错误:' + row.sync_kanke_msg
            }
        },
    }
}


</script>

<style>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}

.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.search-content {
    width: 100%;
    margin: 20px;
}
</style>